{% extends "pos/base.html" %}
{% load static %}

{% block title %}Sale Approval Detail{% endblock %}
{% block heading %}Sale Approval Detail{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'styles/pos_api_v2/offline/approvals/approval.css' %}">
{% endblock %}

{% block content %}

<div class="approval-page">

    <div class="approval-detail-header">
        <div>
            <h4>Invoice #{{ header.description }}</h4>
            <p>{{ header.transaction_date }} | {{ customer.name|default:"Cash Customer" }}</p>
            <h5>Customer: {{ customer_name }}</h5>
        </div>

        <div class="approval-detail-actions">
            <a href="{% url 'pos_api_v2:offline:approvals:sale_approval_list' %}" class="btn btn-light">Back</a>
            <form method="post" action="{% url 'pos_api_v2:offline:approvals:sale_approve' %}" style="display:inline;">
                {% csrf_token %}
                <input type="hidden" name="invoice_no" value="{{ header.description }}">
                <button type="submit" class="btn btn-success">
                    Approve
                </button>
            </form>
            <form method="post"
              action="{% url 'pos_api_v2:offline:approvals:sale_reject_single' header.description %}"
              style="display:inline;"
              onsubmit="return confirm('Reject invoice #{{ header.description }}? This staging sale will be permanently deleted.');">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">
                Reject
            </button>
        </form>
        </div>
    </div>

    <div class="approval-summary-row">
        <div class="approval-summary-card">
            <span>Salesman</span>
            <strong>{{ salesman_name|default:"-" }}</strong>
            {% if booker %}
                <small style="display:block; color:#a8b3c7; margin-top:4px;">
                    Booker: {{ booker.name }}
                </small>
            {% endif %}
        </div>
        <div class="approval-summary-card">
            <span>Salesman</span>
            <strong>{{ booker.name|default:"-" }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Total</span>
            <strong>{{ header.total_amount|floatformat:2 }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Received</span>
            <strong>{{ header.amount_transaction|floatformat:2 }}</strong>
        </div>
    </div>

    <div class="approval-table-card">
        <h5>Sale Itedddddddddddms</h5>
        <table class="table table-bordered approval-table">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Buyer</th>
                    <th class="text-right">Qty (in packs)</th>
                    <th class="text-right">Bonus (in pcs)</th>
                    <th class="text-right">Rate</th>
                    <th class="text-right">Total Discount</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                {% for line in lines %}
                    <tr>
                        <td>{{ line.product_code }}</td>
                        <td>{{ line.product_name|default:"-" }}</td>
                        <td>{{ line.buyer }}</td>
                        <td class="text-right">{{ line.qty_inpack_pcs }}</td>
                        <td class="text-right">{{ line.bonus_inpcs|floatformat:2 }}</td>
                        <td class="text-right">{{ line.item_price|floatformat:2 }}</td>
                        <td class="text-right">{{ line.total_discount|floatformat:2 }}</td>
                        <td class="text-right">{{ line.total_price|floatformat:2 }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="7" class="approval-empty">No items found.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="approval-table-card">
        <h5>Bank / Payment Rows</h5>
        <table class="table table-bordered approval-table">
            <thead>
                <tr>
                    <th>Bank</th>
                    <th>Category</th>
                    <th class="text-right">Amount</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                {% for b in banks %}
                    <tr>
                        <td>
                            {{ b.bank_name|default:"-" }}
                            <small class="text-muted">ID: {{ b.name }}</small>
                        </td>
                        <td>{{ b.category }}</td>
                        <td class="text-right">{{ b.amount_transaction|floatformat:2 }}</td>
                        <td>{{ b.transaction_date }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="4" class="approval-empty">No bank rows.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

{% endblock %}